<template>
	<div class="mine-apply-agent-wrap">
		<van-nav-bar title="申请区域代理" left-arrow fixed @click-left="onClickLeft" />
		<img class="bg-img" src="../../../images/mine/mine-apply-agent-bg.png" >
		
		<div class="form-wrap" >
			
			<van-form @submit="onSubmit" error-message-align="right" input-align="right">
				<van-field v-model="level_name" readonly name="level" label="申请代理级别：" placeholder="请输入申请代理级别"
					:rules="[{ required: true, message: '请输入申请代理级别' }]" />
				<van-field v-if="level != 0" v-model="region_name" name="region_name" label="请选择代理区域：" placeholder=""
					:rules="[{ required: true, message: '请选择代理区域' }]" @click="showPopup = true" readonly is-link />
				<van-field v-if="level == 0" v-model="region_name" name="region_name" label="代理区域" placeholder="请选择代理区域"
					:rules="[{ required: true, message: '请选择代理区域' }]" @click="bigShowPopup = true" readonly is-link />
				<!--  bigAgentConfig-->
				<van-field v-model="name" name="name" label="请输入姓名：" placeholder="请输入姓名"
					:rules="[{ required: true, message: '请输入姓名' }]" />
				<van-field v-model="contact_phone" type="tel" name="contact_phone" label="请输入联系电话：" placeholder="请输入联系电话"
					:rules="[{ required: true, message: '请输入联系电话' }]" />
				<div class="apply_tips">
					<div class="apply_tips_title">温馨提示:</div>
					<div class="apply_tips_content">
						在提交申请后，会有平台的客服人员跟您联系，进行权益、门槛等相关的讲解。
					</div>
				</div>
				
				<div class="apply-btn" >
					<van-button  round block type="info" native-type="submit" >提交申请</van-button>
				</div>
			</van-form>
			<!-- 省市区 -->
			<van-popup v-model="showPopup" position="bottom">
				<van-cascader v-model="cascaderValue" title="请选择地址" :options="options" @close="showPopup = false"
					@change="onChange" @finish="onFinish" />
			</van-popup>
			<!-- 大区 -->
			<van-popup v-model="bigShowPopup" position="bottom">
				<van-picker title="选择代理区域" value-key="name" show-toolbar :columns="bigAgentConfig" @confirm="onConfirmBig"
					@cancel="bigShowPopup=false" :value="cascaderValue" />
			</van-popup>
		</div>
		


	</div>
</template>
<script>
	import {
		AGENT_REGION_LIST,
		AGENT_APPLY,
		BIG_AGENT_CONFIG,
		BIG_AGENT_APPLY
	} from "@/api/mine";

	export default {
		data() {
			return {
				level: "",
				region_code: "",
				region_name: "",
				name: "",
				contact_phone: "",
				showPopup: false,
				cascaderValue: "",
				options: [],
				bigAgentConfig: [],
				bigShowPopup: false,
				level_name: ""
			};
		},
		mounted() {
			window.scrollTo(0, 0);
			this.level_name =
				this.$route.query.level == 1 ?
				"省代理" :
				this.$route.query.level == 2 ?
				"市代理" :
				this.$route.query.level == 3 ?
				"区代理" :
				"大区代理";
			this.level = this.$route.query.level
			if (this.level != 0) {
				this.fetchRegions(1, 0);
			} else {
				this.$http.get(BIG_AGENT_CONFIG).then((res) => {
					this.bigAgentConfig = res.data.map(item => ({
						...item,
						disabled: item.count >= 1 // 如果 count >= 1，则禁用该选项
					}));
				});
			}
		},
		methods: {
			// 大区确定
			onConfirmBig(value) {
				// console.log(value);
				this.cascaderValue = value.id
				this.region_name = value.name
				this.bigShowPopup = false

			},
			// 选择器变化时的回调
			onChange(res) {
				this.tabIndex = res.tabIndex;
				//   console.log(res, "res");
				let index =
					this.$route.query.level == 3 ? 2 : this.$route.query.level == 2 ? 1 : 0;
				if (this.tabIndex === index) {
					// this.showPopup = false;
					return;
				}
				//点击加载下一级回调
				this.getSpaceListAgain(res.selectedOptions, res.value);
			},
			getSpaceListAgain(selectedOptions, value) {
				this.$http
					.get(AGENT_REGION_LIST, {
						params: {
							code: value,
						},
					})
					.then((res) => {
						const {
							data
						} = res;

						if (data && data.length) {
							this.setOptions(selectedOptions, data);
						}
					});
			},
			setOptions(selectedOptions, data) {
				let _options = this.options;
				selectedOptions.forEach((item, index) => {
					if (index) {
						//不是第一个则取下一级children
						_options = _options.children;
					}
					_options =
						_options[_options.findIndex((_item) => _item.value === item.value)];
				});
				//找到最后一级
				let index =
					this.$route.query.level == 3 ? 1 : this.$route.query.level == 2 ? 0 : 0;
				_options.children = data.map((item) => {
					return {
						text: item.name,
						value: item.code,
						children: this.tabIndex == index ? null : [],
					};
				});
			},
			// 确定省市区
			onFinish({
				selectedOptions
			}) {
				this.showPopup = false;

				this.selectAreaList = selectedOptions;

				selectedOptions = selectedOptions.filter((item) => {
					return item.value !== 0;
				});

				//   console.log(selectedOptions, "ll");

				this.region_name = selectedOptions.map((option) => option.text).join("/");
			},
			async fetchRegions(parentCode, level) {
				const res = await this.$http.get(AGENT_REGION_LIST, {
					params: {
						code: parentCode,
					},
				});
				const {
					data
				} = res;

				// 省级
				if (this.$route.query.level == 1) {
					data.forEach((item) => {
						this.options.push({
							text: item.name,
							value: item.code,
							// children: [],
						});
					});
					return;
				} else {
					if (level === 0) {
						data.forEach((item) => {
							this.options.push({
								text: item.name,
								value: item.code,
								children: [],
							});
						});
					} else if (level === 1) {
						// 市级数据
						const province = this.options.find(
							(item) => item.value === parentCode
						);
						if (province) {
							province.children = data.map((item) => ({
								text: item.name,
								value: item.code,
								children: [],
							}));
						}
					} else if (level === 2) {
						// 区/县级数据
						this.options.forEach((province) => {
							const city = province.children.find(
								(item) => item.value === parentCode
							);
							if (city) {
								city.children = data.map((item) => ({
									text: item.name,
									value: item.code,
									children: [],
								}));
							}
						});
					}
				}

				//   else if (level === 3) {
				//     // 街道数据
				//     this.options.forEach((province) => {
				//       province.children.forEach((city) => {
				//         const county = city.children.find(
				//           (item) => item.value === parentCode
				//         );
				//         if (county) {
				//           county.children = data.map((item) => ({
				//             text: item.name,
				//             value: item.code,
				//           }));
				//         }
				//       });
				//     });
				//   }
			},
			onClickLeft() {
				this.$router.back();
			},
			// 提交申请
			onSubmit() {
				let params = {
					level: this.$route.query.level,
					region_code: this.cascaderValue,
					name: this.name,
					contact_phone: this.contact_phone,
				};
				if (this.$route.query.level == 0) {
					let data = {
						config_id: this.cascaderValue,
						name: this.name,
						contact_phone: this.contact_phone,
					}
					// 大区
					this.$http.post(BIG_AGENT_APPLY, data).then((res) => {
						this.$toast.success("申请成功");
						this.$router.back();
					});
				} else {
					this.$http.post(AGENT_APPLY, params).then((res) => {
						this.$toast.success("申请成功");
						this.$router.back();
					});
				}
				// console.log(params);

			},
		},
	};
</script>
<style lang="scss">
	.mine-apply-agent-wrap {
		position: relative;
		height: 100vh;
		padding-top: 46px;
		background-color: #FEE8D5;
		box-sizing: border-box;
		overflow: hidden;

		.van-nav-bar .van-icon {
			color: #333333;
		}

		.van-nav-bar__arrow {
			font-size: 20px;
		}

		.van-hairline--bottom::after {
			display: none;
		}
		
		.bg-img{
			display: block;
			width: 100%;
		}
		.form-wrap{
			position: absolute;
			top: 163px;
			left: 0;
			right: 0;
			margin: auto;
			width: 6.86rem;
			height: 12.14rem;
			border-radius: 0.16rem 0.16rem 0 0;
			background-color: #ffffff;
			overflow: hidden;
		}
		.van-cell{
			padding: 13px 17px;
			.van-field__label{
				width: 2.4rem;
			}
		}

		.apply_tips {
			width: 6.22rem;
			height: 1.76rem;
			padding: 0.28rem 0.2rem;
			margin: auto;
			margin-top: 0.36rem;
			border-radius: 0.08rem;
			box-sizing: border-box;
			background-color: #FFF9F9;
			.apply_tips_title {
				height: 0.4rem;
				margin-bottom: 0.12rem;
				line-height: 0.4rem;
				font-size: 0.28rem;
				font-weight: 500;
				color: #333333;
			}

			.apply_tips_content {
				line-height: 0.34rem;
				font-size: 0.24rem;
				color: #666666;
			}
		}
		.apply-btn{
			width: 6.06rem;
			height: 0.88rem;
			margin: auto;
			margin-top: 0.6rem;
			.van-button--info{
				border: none;
				background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
			}
		}
	}
</style>
